<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>登录</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/static/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="/static/css/sm.min.css">
		<link rel="stylesheet" href="/static/css/sm-extend.min.css">
	</head>
	<style>
		.bar{
			height: 13rem!important;
			background: #0894ec;
		}
		.bar-nav~.content {
			top: 13rem;
		}
		.list-block{
			margin: 0;
		}
		.list-block>ul li{
			padding: .5rem 0;
		}
		.list-block>ul{
			padding-top: 1rem;
		}
		.list-block .item-title.label {
			width: 15%;
		}
		.content {
			background: white;
		}
		.item-inner{
			border-bottom: solid 1px #e7e7e7;
		}
		.list-block ul:after {
			height: 0px;
		}
		.list-block .item-inner:after {
			height: 0px;
		}
		.content-block {
			margin: 2.3rem 0;
		}
		.login{
			width: 10rem;
			height: 10rem;
			border-radius: 100%;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgb(26, 144, 205);
		}
		.login1{
			width: 7rem;
			height: 7rem;
			border-radius: 100%;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgb(118, 192, 229);
		}
		.login2{
			width: 4rem;
			height: 4rem;
			border-radius: 100%;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgb(214, 237, 248);
		}
		.login3{
			width: 2.5rem!important;
			height: 2.5rem;
			font-size: 2.5rem!important;
			margin: auto!important;
			position: absolute!important;
			top: 0!important;
			left: 0!important;
			right: 0!important;
			bottom: 0!important;
			color: #0894ec;
		}
		.bar .icon {
			position: relative;
			z-index: 20;
			padding: .5rem 0rem;}
	</style>
	<body>

	<header class="bar bar-nav">
		<a class="icon icon-left pull-left" style="color: white" href="javascript:history.go(-1)"></a>
<!--		<a href="/page/regUI" class="pull-right" style="color: white;padding: .5rem">注册</a>-->
		<div class="login"><div class="login1"><div class="login2"><div class="icon icon-me login3"></div></div></div></div>
	</header>

	<div class="content">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-media"><i class="icon icon-form-name"></i></div>
						<div class="item-inner">
							<div class="item-title label"><img src="/static/img/user.png"style="width: 1.3rem" /></div>
							<div class="item-input">
								<input type="text" name="username" placeholder="账号">
							</div>
						</div>
					</div>
				</li>

				<li>
					<div class="item-content">
						<div class="item-media"><i class="icon icon-form-password"></i></div>
						<div class="item-inner">
							<div class="item-title label"><img src="/static/img/password.png"style="width: 1.3rem" /></div>
							<div class="item-input">
								<input type="password" name="password" placeholder="密码" class="">
							</div>
						</div>
					</div>
				</li>

			</ul>
		</div>

<!--		<a href="/page/updatePwdUI" class="pull-right"style="margin: .5rem" >忘记密码</a>-->
		<div class="content-block">
			<p>
				<a href="javascript:void(0);" onclick="checkLogin()" class="button button-big button-fill">登录</a>
			</p>
		</div>
	</div>

	<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
	<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>
	<script type="text/javascript">

        var usernameRegex=/^[A-Za-z0-9]{6,16}$/;
        var passwordRegex=/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,16}/;

        var username = $('input[name = "username"]');
        var password = $('input[name = "password"]');

		function checkLogin() {
            console.log(username.val()+'---'+password.val());
			if (username.val() == ''){
			    $.toast('请输入账号',1000);
			}else if(password.val() == ''){
                $.toast('请输入密码',1000);
			} else {
			    $.ajax({
                    type: 'post',
                    url: '/front/login',
                    dataType: 'json',
                    data:{
						amount: username.val(),
                        password: password.val()
                    },
					success:function (re) {
						if (!re.status){
						    $.toast('登录成功');
							localStorage.setItem('userInfo',JSON.stringify(re.data));
							if(re.data.type === 1){
								window.location.href='/page/teacher/indexPage'
							}else {
								window.location.href='/page/indexPage'
							}
						} else {
						    $.toast(re.msg)
						}
                    }
				})
			}
        }

	</script>

	</body>
</html>